import SMSLogin from "./Components/SMSLogin";
import AccountLogin from "./Components/AccountLogin";
import { Button, Col, Form, Input, Row } from "antd";
import IconMap from "@/components/IconMap";
import React, { useState } from "react";
import FormItem from "antd/es/form/FormItem";
import logoImg from "@/common/img/logo.svg";
import { useDispatch, useSelector, history } from "umi";

export type ComponentType = {
  type: number;
  Input: any;
  FormItem: any;
  form: any;
};

const Login = () => {
  const [type, setType] = useState(0);

  const [form] = Form.useForm();

  const dispatch = useDispatch();
  const loading = useSelector((state: any) => state?.loading);
  console.log(loading);

  function finishChange(val: any) {
    // console.log(val);
    dispatch({ type: "user/login", payload: val });
  }

  //组件选择
  const selectComponent = (props: ComponentType) =>
    props.type !== 1 ? <AccountLogin {...props} /> : <SMSLogin {...props} />;

  return (
    <div className="w-full h-screen bg-[#eeeeee] flex justify-center items-center">
      <div className=" bg-white flex  flex-col justify-center  login-card   px-20  shadow-sm ">
        {/* 头 */}
        <div className="flex justify-center items-center gap-4 mb-10  ">
          <img src={logoImg} alt="" className="w-10" />
          <span className="font-bold text-2xl bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">
            BBQ 人事系统
          </span>
        </div>

        <Form form={form} onFinish={finishChange}>
          {selectComponent({ type, Input, FormItem, form })}
          <Row>
            <Button
              type="primary"
              block
              className="mb-10"
              onClick={() => form.submit()}
              loading={loading.effects["user/login"]}
            >
              登陆
            </Button>
          </Row>
          <Row className="cursor-pointer text-gray-500">
            <Col span={6} onClick={() => history.push("/users/ForgetPassword")}>
              忘记密码
            </Col>
            <Col
              span={18}
              className="text-right"
              onClick={() => setType((s) => (!s ? 1 : 0))}
            >
              {type !== 1 ? "账户密码登录 " : "验证码登录 "}
              {<IconMap.ArrowRightOutlined />}
            </Col>
          </Row>
        </Form>
      </div>
    </div>
  );
};

export default Login;
